import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart' ;
import 'package:flutter/services.dart';
import 'package:flutter_badge/flutter_badge.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:mfkb/config/Config.dart';
import 'package:mfkb/pages/modules/CustomRoute.dart';
import 'package:mfkb/pages/school/market/Cart.dart';
import 'package:mfkb/pages/school/plugins/SwiperHeadWdget.dart';
import 'package:mfkb/plugin/MyBehavior.dart';
import 'package:mfkb/service/MarketService.dart';
import 'package:toast/toast.dart';

class GoodsDetail extends StatefulWidget {
  int id ;
  GoodsDetail({Key key , @required this.id}):super(key:key) ;
  @override
  _GoodsDetailState createState() => _GoodsDetailState();
}

class _GoodsDetailState extends State<GoodsDetail> {

  dynamic data = null ;
  int _current = 0 ;
  int count = 0 ;

  @override
  void initState() {
    super.initState();
    MarketService().goodsDetail(widget.id).then((value){
      if(value["code"] == 200){
        data = value["data"] ;
        setState(() {});
      }else{
        Toast.show(value["msg"], context) ;
      }
    }) ;
    MarketService().cartData().then((value){
      if(value["code"] == 200){
        count = value["data"]["count"] ;
      }else{
        Toast.show(value["msg"], context) ;
      }
    }) ;
  }

  void _showActionSheet() {
    showModalBottomSheet(
      context: context,
      backgroundColor: Color.fromARGB(0, 255, 255, 255) ,
      builder: (BuildContext context) {
        return StatefulBuilder(
          builder: (c , s){
            return ClipRRect(
              borderRadius: BorderRadius.only(
                topLeft:Radius.circular(12) ,
                topRight:Radius.circular(12)
              ),
              child: Container(
                height: ScreenUtil().setHeight(526),
                color: Colors.white ,
                child: Column(
                  children: <Widget>[
                    Container(
                      height: ScreenUtil().setHeight(80),
                      margin: EdgeInsets.only(left:ScreenUtil().setWidth(15) , right:ScreenUtil().setWidth(15) , top:ScreenUtil().setHeight(14)),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start ,
                        children: <Widget>[
                          ClipRRect(
                            borderRadius: BorderRadius.all(Radius.circular(4)),
                            child: Container(
                              width: ScreenUtil().setHeight(80),
                              height: ScreenUtil().setHeight(80),
                              decoration: BoxDecoration(
                                border: Border.all(
                                  color:Color.fromARGB(255, 236, 237, 241)
                                )
                              ),
                              child: CachedNetworkImage(
                                imageUrl: data["sizes"].length != 0 ? Config().getImgHost() + data["sizes"][_current]["img"] : "" ,
                                fit: BoxFit.fill,
                                placeholder: (contex , url){
                                  return Container(
                                    color:Color.fromARGB(255, 246, 245, 248) ,
                                    child: Center(
                                      child: Image.asset("assets/images/imageloading.png"),
                                    ) ,
                                  ) ;
                                },
                              ),
                            ),
                          ) ,
                          Expanded(
                            child: Container(
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.end ,
                                crossAxisAlignment: CrossAxisAlignment.start ,
                                children: <Widget>[
                                  Container(
                                    height: ScreenUtil().setHeight(33),
                                    margin: EdgeInsets.only(left:ScreenUtil().setWidth(11)),
                                    child: Row(
                                      children: <Widget>[
                                        Text("￥" , style: TextStyle(
                                          fontSize: ScreenUtil().setSp(12) ,
                                          color: Colors.red ,
                                          height: ScreenUtil().setHeight(24) / ScreenUtil().setSp(12) ,
                                          fontWeight: FontWeight.bold
                                        ),) ,
                                        Text(data["sizes"].length != 0 ? data["sizes"][_current]["sprice"].toString() : "未知" , style: TextStyle(
                                          fontSize: ScreenUtil().setSp(24) ,
                                          color: Colors.red ,
                                          fontWeight: FontWeight.bold 
                                        ),)
                                      ],
                                    )
                                  ) ,
                                  Container(
                                    height: ScreenUtil().setHeight(17),
                                    margin: EdgeInsets.only(left:ScreenUtil().setWidth(11) , top:2 , bottom:4),
                                    child: Text("剩余"+ (data["sizes"].length != 0 ? data["sizes"][_current]["sstock"].toString() : "未知")+"件" , style: TextStyle(
                                      color: Color.fromARGB(255, 121, 132, 155) ,
                                      fontSize: ScreenUtil().setSp(12) ,
                                    ),),
                                  )
                                ],
                              ),
                            ),
                          ) ,
                          GestureDetector(
                            child: Container(
                              width: 24 ,
                              height: 24 ,
                              child: Image.asset("assets/images/close_circle.png"),
                            ),
                            onTap: (){
                              Navigator.of(context).pop() ;
                            },
                          )
                        ],
                      ),
                    ) ,
                    Expanded(
                      child: Container(
                        margin: EdgeInsets.only(top:ScreenUtil().setHeight(7) , left:ScreenUtil().setWidth(15) , right:ScreenUtil().setWidth(15)),
                        child: ScrollConfiguration(
                          behavior: MyBehavior() ,
                          child: ListView(
                            padding: EdgeInsets.all(0),
                            children: <Widget>[
                              Container(
                                height: ScreenUtil().setHeight(20),
                                margin: EdgeInsets.only(top:ScreenUtil().setHeight(40) , left:ScreenUtil().setWidth(6)),
                                child: Text("规格" , style: TextStyle(
                                  color: Color.fromARGB(255, 19, 27, 54) ,
                                  fontWeight: FontWeight.bold 
                                ),),
                              ) ,
                              Container(
                                margin: EdgeInsets.only(top:ScreenUtil().setHeight(12)),
                                child: data["sizes"].length == 0 ? Container() : Wrap(
                                  runSpacing: ScreenUtil().setHeight(12),
                                  spacing: ScreenUtil().setWidth(12),
                                  children: List.generate(data["sizes"].length , (index){
                                    return  GestureDetector(
                                      child: Container(
                                        decoration: BoxDecoration(
                                          color: _current == index ? Color.fromARGB(25, 0, 195, 206) : Color.fromARGB(255, 246, 246, 248) ,
                                          borderRadius: BorderRadius.all(Radius.circular(19)) ,
                                          border: Border.all(
                                            color: _current == index ? Color.fromARGB(255, 0, 195, 206) : Color.fromARGB(255, 216, 220, 227)
                                          )
                                        ),
                                        padding: EdgeInsets.only(left:ScreenUtil().setWidth(16) , right:ScreenUtil().setWidth(16) , top:ScreenUtil().setHeight(7) , bottom: ScreenUtil().setHeight(7)),
                                        child: Text(data["sizes"][index]["sname"] , style: TextStyle(
                                          color: _current == index ? Color.fromARGB(255, 0 , 195, 206) : Color.fromARGB(255, 19, 27, 54) ,
                                          fontSize: ScreenUtil().setSp(13) ,
                                          fontWeight: FontWeight.bold 
                                        ),),
                                      ),
                                      onTap: (){
                                        s(() {
                                          _current = index ;
                                        });
                                      },
                                    );
                                  }),
                                ),
                              )
                            ],
                          ),
                        ),
                      ),
                    ) ,
                    Container(
                      height: ScreenUtil().setHeight(60),
                      width: ScreenUtil().setWidth(375),
                      decoration: BoxDecoration(
                        boxShadow: [
                          BoxShadow(
                            blurRadius: 5 ,
                            color: Color.fromARGB(50, 0, 0, 0)
                          )
                        ] ,
                        color: Colors.white 
                      ),
                      child: Center(
                        child: GestureDetector(
                          child: Container(
                            width: ScreenUtil().setWidth(335),
                            height: ScreenUtil().setHeight(40),
                            decoration: BoxDecoration(
                              color: Color.fromARGB(255, 0, 195, 206) ,
                              borderRadius: BorderRadius.all(Radius.circular(21))
                            ),
                            child: Center(
                              child: Text("加入购物车" , style: TextStyle(
                                color: Colors.white , 
                                fontWeight: FontWeight.bold ,
                                fontSize: ScreenUtil().setSp(14)
                              ),),
                            ),
                          ),
                          onTap: (){
                            if(data["sizes"].length == 0){
                              Toast.show("此商品没有任何规格可以选择", context) ;
                            }else{
                              MarketService().addGoodsToCart(data["gid"], data["sizes"][_current]["sid"]).then((value){
                                if(value["code"] == 200){
                                  Toast.show("成功", context) ;
                                }else{
                                  Toast.show(value["msg"], context) ;
                                }
                              }) ;
                            }
                          },
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ) ;
          },
        );
      }
    );
  }

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.dark ,
      child: Scaffold(
        body: Container(
          color: Colors.white ,
          child: Column(
            children: <Widget>[
              Expanded(
                child: data == null ? Container() : ScrollConfiguration(
                  behavior: MyBehavior() ,
                  child: ListView(
                    padding: EdgeInsets.all(0),
                    children: <Widget>[
                      SwiperHeadWidget(data:data , h: ScreenUtil().setWidth(375),) ,
                      Container(
                        margin: EdgeInsets.only(left:ScreenUtil().setWidth(15) , right:ScreenUtil().setWidth(9)),
                        child: Text(
                          data["gname"] , maxLines: 2 , overflow: TextOverflow.ellipsis , style: TextStyle(
                            fontSize: ScreenUtil().setSp(16) ,
                            fontWeight: FontWeight.bold ,
                            color: Color.fromARGB(255, 19, 28, 53) ,
                            height: ScreenUtil().setHeight(22) / ScreenUtil().setSp(16)
                          ),
                        ),
                      ) ,
                      Container(
                        margin: EdgeInsets.only(left:ScreenUtil().setWidth(15) , right:ScreenUtil().setWidth(9) , top:ScreenUtil().setHeight(12)),
                        child: Text(
                          data["subTitle"] , maxLines: 1 , overflow: TextOverflow.ellipsis , style: TextStyle(
                            fontSize: ScreenUtil().setSp(12) ,
                            color: Color.fromARGB(255, 121, 132, 155) ,
                            height: ScreenUtil().setHeight(17) / ScreenUtil().setSp(16)
                          ),
                        ),
                      ) ,
                      Container(
                        height: ScreenUtil().setHeight(29) ,
                        margin: EdgeInsets.only(left:ScreenUtil().setWidth(15) , right:ScreenUtil().setWidth(9) , top:ScreenUtil().setHeight(22)),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.end ,
                          children: <Widget>[
                            Text("￥" , style: TextStyle(
                              fontSize: ScreenUtil().setSp(12) ,
                              fontWeight: FontWeight.bold ,
                              color: Color.fromARGB(255, 19, 28, 53)
                            ),) ,
                            Text(data["price"].toString() , style: TextStyle(
                              fontSize: ScreenUtil().setSp(24) ,
                              fontWeight: FontWeight.bold ,
                              color: Color.fromARGB(255, 19, 28, 53)
                            ),) ,
                            Container(
                              margin: EdgeInsets.only(left:ScreenUtil().setWidth(5)),
                              child: Text(
                                "还剩余"+data["stock"].toString()+"件" , style: TextStyle(
                                  fontSize: ScreenUtil().setSp(12) ,
                                  color: Color.fromARGB(255, 121, 132, 155)
                                ),
                              ),
                            )
                          ],
                        ),
                      ) ,
                      data["tags"].length == 0 ? Container() : Container(
                        margin: EdgeInsets.only(top:ScreenUtil().setHeight(34) , left:ScreenUtil().setWidth(55) , right: ScreenUtil().setWidth(55)),
                        child: Center(
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            mainAxisSize: MainAxisSize.max,
                            children: List.generate(data["tags"].length , (index){
                              return Row(
                                children: <Widget>[
                                  Container(
                                    width: ScreenUtil().setWidth(16),
                                    height: ScreenUtil().setWidth(16),
                                    child: CachedNetworkImage(
                                      imageUrl: Config().getImgHost() + data["tags"][index]["ticon"],
                                    ),
                                  ) ,
                                  Container(
                                    margin: EdgeInsets.only(left:ScreenUtil().setWidth(3)),
                                    child: Text(data["tags"][index]["tname"] ,style: TextStyle(
                                      fontSize: ScreenUtil().setSp(12) ,
                                      color: Color.fromARGB(255, 121, 132, 155)
                                    ),),
                                  )
                                ],
                              ) ;
                            }),
                          ),
                        ),
                      ) ,
                      Container(
                        margin: EdgeInsets.only(top:ScreenUtil().setHeight(11) , left:ScreenUtil().setWidth(18) , right:ScreenUtil().setWidth(12)),
                        height: 1 ,
                        color: Color.fromARGB(255, 236, 237, 241),
                      ) ,
                      Container(
                        margin: EdgeInsets.only(left:ScreenUtil().setWidth(15) , top:ScreenUtil().setHeight(36)),
                        child: Text("商品详情" , style: TextStyle(
                          fontSize: ScreenUtil().setSp(16) ,
                          fontWeight: FontWeight.bold ,
                          color: Color.fromARGB(255, 19, 28, 53)
                        ),),
                      ) ,
                      Container(
                        margin: EdgeInsets.only(top:ScreenUtil().setHeight(15) , left:ScreenUtil().setWidth(15) , right:ScreenUtil().setWidth(15)),
                        child: Column(
                          children: List.generate(data["imgDetail"].length, (index){
                            return ClipRRect(
                              borderRadius: index == 0 ? BorderRadius.only(topLeft: Radius.circular(6) , topRight: Radius.circular(6)) : index + 1 == data["imgDetail"].length ? BorderRadius.only(bottomLeft: Radius.circular(6) , bottomRight: Radius.circular(6)) : BorderRadius.all(Radius.circular(0)) ,
                              child: CachedNetworkImage(
                                imageUrl: Config().getImgHost() + data["imgDetail"][index]["url"] ,
                                placeholder: (contex , url){
                                  return Container(
                                    color:Color.fromARGB(255, 246, 245, 248) ,
                                    child: Center(
                                      child: Image.asset("assets/images/imageloading.png"),
                                    ) ,
                                  ) ;
                                },
                              ),
                            ) ;
                          }),
                        ),
                      ) ,
                      Container(
                        margin: EdgeInsets.only(top:ScreenUtil().setHeight(22) , bottom:ScreenUtil().setHeight(24)),
                        child: Center(
                          child: Text("已经没有更多了" , style: TextStyle(
                            color: Color.fromARGB(255, 121, 132, 155) ,
                            fontSize: ScreenUtil().setSp(10)
                          ),),
                        ),
                      )
                    ],
                  ),
                ),
              ) ,
              Container(
                height: ScreenUtil().setHeight(60) ,
                decoration: BoxDecoration(
                  color: Colors.white ,
                  boxShadow: <BoxShadow>[
                    BoxShadow(
                      blurRadius: 12 ,
                      color: Color.fromARGB(80 , 0, 0, 0) ,
                      offset: Offset(0 , 3)
                    )
                  ]
                ),
                child: Row(
                  children: <Widget>[
                    GestureDetector(
                      child:  Container(
                        width: ScreenUtil().setHeight(30),
                        height: ScreenUtil().setHeight(30),
                        margin: EdgeInsets.only(left:ScreenUtil().setWidth(30)),
                        child: Badge(
                          child: Image.asset("assets/images/gwc1.png" , fit: BoxFit.fill,),
                          number: count,
                          offsetX: -5,
                          offsetY: -5,
                        ),
                      ) ,
                      onTap: (){
                        Navigator.of(context).push(CustomRoute(Cart())) ;
                      },
                    ),
                    Container(
                      margin: EdgeInsets.only(left:ScreenUtil().setWidth(52)),
                      width: ScreenUtil().setWidth(30),
                      height: ScreenUtil().setWidth(30),
                      child: Image.asset("assets/images/kf.png" , fit:BoxFit.fill),
                    ) ,
                    Expanded(
                      child: Container() ,
                    ) ,
                    GestureDetector(
                      child: Container(
                        width: ScreenUtil().setWidth(180),
                        height: ScreenUtil().setHeight(40),
                        margin: EdgeInsets.only(right:ScreenUtil().setWidth(15)),
                        decoration: BoxDecoration(
                          color: Color.fromARGB(255, 0, 195, 206) ,
                          borderRadius: BorderRadius.all(Radius.circular(21)) ,
                        ),
                        child: Center(
                          child: Text("加入购物车" , style: TextStyle(
                            fontSize: ScreenUtil().setSp(14) ,
                            fontWeight: FontWeight.bold ,
                            color:Colors.white 
                          ),),
                        ),
                      ),
                      onTap: (){
                        _showActionSheet() ;
                      },
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}